<template>
	<view class="page">
		<image :src="config.apply_background" style="width: 100%;display: block;position: fixed;bottom: 0;right: 0;"
			mode="widthFix"></image>
		<view style="position: relative;z-index: 2;">
			<image :src="config.apply_banner" style="width: 100%;display: block;" mode="widthFix"></image>
			<view class="p15">

				<view class="module-block brs8 p15">



					<view class="bg-block fz16 bm pb15 mb15 u-flex">

						<view class="item-addon c0"><span class="xing">*</span>姓名</view>
						<view class="pl10">
							<input v-model="post.name" style="padding: 0;" type="text" placeholder="请填写姓名" />
						</view>
					</view>

					<view class="bg-block fz16 bm pb15 mb15 u-flex">

						<view class="item-addon c0"><span class="xing">*</span>联系方式</view>
						<view class="pl10">
							<input v-model="post.phone" style="padding: 0;" type="text" placeholder="请填写联系方式" />
						</view>
					</view>
					<!-- <view class="bg-block fz16 bm pb15 mb15 u-flex">

						<view class="item-addon c0"><span class="xing">*</span>证书或者礼品的邮寄地址</view>
						<view class="mt10">
							<input v-model="post.name" style="padding: 0;" type="text" placeholder="请填写证书或者礼品的邮寄地址" />
						</view>
					</view> -->
					<view class="bg-block fz16 bm pb15 mb15 u-flex"
						@click="pupopList=cateList,pupopType='identity',pupopShow=true">

						<view class="item-addon c0"><span class="xing">*</span>身份选择</view>
						<view class="pl10" style="position: relative;">
							<view class="bg-select"></view>
							<input style="padding: 0;" v-model="post.identity" disabled type="text"
								placeholder="请选择身份选择" />
						</view>
					</view>


					<view class="bg-block fz16 bm pb15 mb15 u-flex"
						@click="pupopList=timeList,pupopType='year',pupopShow=true">

						<view class="item-addon c0"><span class="xing">*</span>时间区间</view>
						<view class="pl10" style="position: relative;">
							<view class="bg-select"></view>
							<input style="padding: 0;" v-model="post.year" disabled type="text"
								placeholder="请选择时间区间" />
						</view>
					</view>

					<view class="bg-block fz16 bm pb15 mb15">

						<view class="item-addon c0"><span class="xing">*</span>是否愿意参加周年庆当晚的篝火晚会</view>
						<view class="mt10">

							<u-radio-group v-model="post.is_soiree">
								<u-radio name="是">
									是
								</u-radio>
								<u-radio name="否">
									否
								</u-radio>
							</u-radio-group>
						</view>
					</view>
				</view>









			</view>

			<view class="p15">

				<view class="module-block brs8 p15">

					<view class="fz16 u-font-bold mb10">一，征文</view>
					<view class="fz12 c9 mb15">
						我与少年宫的故事，与少年宫相关的征文、诗歌、日记或者回忆录等，体裁不限。可记录您在少年宫学习的课程、参加的活动、结识的朋友，或少年宫对个人成长的影响等。
					</view>
					<view class="u-f-justify">
						<view class="btn-add" @click="uploadVideo">点击上传</view>
					</view>

				</view>
				<view class="module-block brs8 p15 mt20">


					<view class="fz16 u-font-bold mb10 ">二，照片</view>
					
					<view>

						<view>
							<view class="" style="width: 80px;" @click="chooseImg('identification_photo')">
								<view>
									<view v-if="post.identification_photo" style="position: relative;">
							
										<image :src="post.identification_photo" style="width: 100%;height: 80rpx;"
											mode="widthFix">
										</image>
										<u-icon style="position: absolute;z-index: 5;" size="50" name="close-circle-fill"
											@click.native.stop="post.identification_photo=''"></u-icon>
									</view>
							
									<view class="btn-img fz24" v-else>+</view>
								</view>
							</view>
						</view>
						<view class="bg-block fz16 bm pb15 mb15 mt10">
							<view>
								<textarea maxlength="30" style="min-height:40px;font-size:26rpx;"
									v-model="post.work_content" auto-height placeholder="包含人物、时间、地点、事件 不超过30字" />
							</view>
						</view>
					</view>
					<view class="u-f-justify">
						<view class="btn-add">点击上传</view>
					</view>

				</view>
				<view class="module-block brs8 p15 mt20">


					<view class="fz16 u-font-bold mb10 " style="text-align: center;">三，视频</view>
					
					<view>

						<view>
							<view style="position: relative;">
								<u-icon style="position: absolute;z-index: 5;right: 0;" size="50"
									name="close-circle-fill" @click.native.stop="post.image=''"></u-icon>
								<image src="/static/image/a1.png" style="width: 100%;height: 100px;" mode="aspectFit">
								</image>

							</view>
						</view>
						<view class="bg-block fz16 bm pb15 mb15 mt10">
							<view>
								<textarea maxlength="30" style="min-height:40px;font-size:26rpx;"
									v-model="post.work_content" auto-height placeholder="请填写图片简介30字以内" />
							</view>
						</view>
					</view>
					<view class="u-f-justify">
						<view class="btn-add">点击上传</view>
					</view>

				</view>

				<view class="module-block brs8 p15 mt20">


					<view class="fz16 u-font-bold mb10 " style="text-align: center;">四，音频</view>
					<view class="fz12 c9 mb15" style="text-align: center;">
						每个照片附有简介：包含人物、时间、地点、事件 不超过30字
					</view>
					<view>

						<view>
							<view style="position: relative;">
								<u-icon style="position: absolute;z-index: 5;right: 0;" size="50"
									name="close-circle-fill" @click.native.stop="post.image=''"></u-icon>
								<image src="/static/image/a1.png" style="width: 100%;height: 100px;" mode="aspectFit">
								</image>

							</view>
						</view>
						<view class="bg-block fz16 bm pb15 mb15 mt10">
							<view>
								<textarea maxlength="30" style="min-height:40px;font-size:26rpx;"
									v-model="post.work_content" auto-height placeholder="请填写图片简介30字以内" />
							</view>
						</view>
					</view>
					<view class="u-f-justify">
						<view class="btn-add">点击上传</view>
					</view>

				</view>




			</view>



			<view class="module-btn p15">
				<view class="btn" @click="toAdd">提交</view>
			</view>
			<u-picker mode="time" v-model="showDate" :params="params" @confirm="dateConfirm"></u-picker>
			<!-- 弹窗选择 -->
			<u-picker mode="selector" range-key="label" @confirm="popupConfirm" v-model="pupopShow"
				:range="pupopList"></u-picker>
			<!-- 弹窗选择 -->


		</view>


	</view>
</template>

<script>
	let oos = require('../../common/oos-js-sdk.js')
	// import AWS from 'aws-sdk';
	import areaPicker from "@/components/area-picker/areaPicker.vue";
	export default {
		components: {
			areaPicker
		},
		data() {
			return {
				showTips: false,
				cateList: [{
					label: '学员/学员家长'
				}, {
					label: '教职工'
				}, {
					label: '热心市民'
				}, ],
				timeList:[],
				isAgree: false,
				activity: {},
				defaultIndex: [0, 0, 0],
				show: false,
				isTop: false,
				allSupplier: [],
				cityList: [],
				workCategoryList: [],
				workGroupList: [],
				nationalityList: [],
				// 基础数据
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				showDate: false,
				pupopShow: false,
				pupopType: 'certificate_type',
				pupopList: [],
				modelList: [],
				colorList: [],
				sexList: [],
				client: {},
				config: {},
				post: {
					name:'',
					phone:'',
					address:'',
					identity:'',
					year:'',
					is_soiree:'',
					article:'',
					article_synopsis:'',
					image:'',
					image_synopsis:'',
					video:'',
					video_synopsis:'',
					music:'',
					music_synopsis:'',
				},
			}
		},
		onLoad(e) {

			this.$api.config({}, res => {
				if (res.code) {
					this.config = res.data
				}
			})
			
			this.timeList=[]
			for(let i=1956;i<2026;i+=10){
				let item={
					label:`${i}-${i+10}`
				}
			this.timeList.push(item)
			}
			this.$nextTick(() => {
				this.initOss()
			})
		},
		onShow() {

		},
		methods: {
			uploadVideo() {
				// uni.chooseImage({
				// 	success: async (chooseImageRes) => {
				// 		const tempFilePaths = chooseImageRes.tempFiles[0];
				// 						 await this.handleUpload(tempFilePaths)
				// 	}
				// });
				uni.chooseVideo({
					success: async (chooseImageRes) => {
						console.log(chooseImageRes, 121212)
						const tempFilePaths = chooseImageRes.tempFile;
						let url = await this.handleUpload(tempFilePaths)
						console.log(url, 121212)
					}
				});
			},
			handleUpload(file) {
				this.isInternal = true
				return new Promise((resolve, reject) => {
					let that = this
					var params = {
						Body: file,
						Bucket: 'sng-image',
						Key: file.name
					}
					console.log(params, 1122222)
					that.client.putObject(params, function(err, data) {
						if (err) {
							console.log(err, 11222222) // an error occurred
							resolve(false)
						} else {
							let response = 'https://oos-cn.ctyunapi.cn/' + params.Bucket + '/' + params.Key
							// that.isInternal = false
							resolve(response)
						}
					})
				})
			},
			initOss() {
				this.client = new OOS.S3({
					accessKeyId: '32b85ea82c9337d1ff26',
					secretAccessKey: '8f7a4fe2861693f9ef439c8250c67190824ccba4',
					endpoint: 'oos-cn.ctyunapi.cn',
					signatureVersion: 'v4',
					apiVersion: '2006-03-01',
					s3ForcePathStyle: true,
				});
				console.log(this.client, 99999)
			},
			// 省市区联动初始化
			showThreePicker() {
				this.show = true
				// this.$refs.areaPicker.showPicker();
			},
			onConfirm(e) {
				console.log(e, 1111)
				this.post.areaName = e[0].name + "-" + e[1].name
				this.post.province = e[0].id
				this.post.city = e[1].id
			},
			chooseImg(type) {
				this.$api.uploadFiles((res) => {
					if (res.code) {
						this.post[type] = res.data.fullurl
					}
				})
			},
			dateConfirm(e) {
				this.post.birthday = `${e.year}-${e.month}-${e.day}`
			},
			popupConfirm(e) {
				let idx = e[0]
				this.post[this.pupopType] = this.pupopList[idx].label
				if (this.pupopType == 'work_category_id' || this.pupopType == 'work_group_id') {

					this.post[this.pupopType] = this.pupopList[idx].id

					this.post[this.pupopType + 'Name'] = this.pupopList[idx].label
				}
			},
			toAdd() {
				if (!this.isAgree) {
					this.$common.errorToShow('请先阅读并同意版权说明！')
					return
				}
				this.$api.activityApply(this.post, res => {
					if (res.code) {
						this.$common.successToShow('提交成功', () => {
							uni.redirectTo({
								url: '/pages/user/car/index'
							})
						})
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn-add {

		background: #4CA8E7;
		color: #fff;
		font-size: 13px;
		padding: 20rpx 40rpx;
		text-align: center;
		border-radius: 50rpx;
	}

	.btn {
		background: #4CA8E7;
		color: #fff;
		font-size: 15px;
		padding: 26rpx;
		width: 100%;
		text-align: center;
		border-radius: 50rpx;
	}

	.module-btn {}

	.line {
		width: 750rpx;
		height: 4rpx;
		position: relative;
		top: -4rpx;
		background: #F6F9F9;
		border-radius: 0px 0px 0px 0px;
	}

	.btn-img {
		border: 1px dashed #ccc;
		border-radius: 10rpx;
		width: 100%;
		height: 160rpx;
		margin: 0 auto;
		display: flex;
		font-size: 30rpx;
		align-items: center;
		justify-content: center;
	}

	.module-block {
		background: #f2f6ff;
	}

	.bg-select {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 5;
	}

	.xing {
		color: red;
		margin-right: 2px;
	}
	.item-addon{
		min-width: 60px;
	}
</style>